import React from 'react';
import Style from './LoginView.module.css'
import { Layout, Row, Col, Form, Input, Button, Checkbox } from 'antd'
const { Content } = Layout;

const onFinish = () => {
  console.log("!")
  sessionStorage.setItem('token', JSON.stringify(true));
}
const onFinishFailed = () => {
  console.log("??")
}

const LoginView = (props) => {
  // console.log(props) // {isLogin:false, checkToke:function(){}}
  const { checkToken } = props;
  if (checkToken()) {
    alert("正在跳转到home页面")
  } else {
    return (
      <Layout>
        <Content>
          <Row className={Style.height100} align='middle' justify="center">
            <Col xs={16} md={12} lg={8} xl={6} className={Style.loginBox}>
              <h1>欢迎使用智能水务系统</h1>
              <Form
                name="basic"
                labelCol={{
                  sm: { span: 8 },
                  md: { span: 8 },
                  lg: { span: 8 }
                }}
                wrapperCol={{
                  sm: { span: 16 },
                  md: { span: 16 },
                  lg: { span: 16 }
                }}
                style={{
                  maxWidth: 400,
                }}
                initialValues={{
                  remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="Username"
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your username!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="Password"
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your password!',
                    },
                  ]}
                >
                  <Input.Password />
                </Form.Item>

                <Form.Item
                  name="remember"
                  valuePropName="checked"
                  wrapperCol={{
                    sm: { span: 16 },
                    md: { span: 16 },
                    lg: { span: 16 }
                  }}
                >
                  <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item
                  // wrapperCol={{
                  //   offset: 8,
                  //   span: 16,
                  // }}
                  wrapperCol={{
                    sm: { span: 16, offset: 8, },
                    md: { span: 16, offset: 8, },
                    lg: { span: 16, offset: 8, }
                  }}
                >
                  <Button block type="primary" htmlType="submit" >
                    Submit
                  </Button>
                </Form.Item>
              </Form>
            </Col>
          </Row>
        </Content>
      </Layout >
    );
  }

}

export default LoginView;
